<template>
	<div class="numberInput">
		<el-input placeholder="请输入内容" class="numberI" v-on:blur="blurInput" v-bind:value="currentValue" v-on:input="inputF">
		</el-input>
		<span class="item__error" :class="errClass" v-show="ifshow">*{{message}}</span>
	</div>
</template>
<style scoped>
	.numberInput {
		position: relative;
		margin: 5px 5px;
	}

	.item__error {
		color: #f56c6c;
		font-size: 12px;
		line-height: 1;
	}

	.err-b-c {
		position: absolute;
		padding-top: 4px;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
	}

	.numberI {
		position: relative;
		display: inline-block;
		width: auto;
	}

	.numberInput i {
		font-size: 18px;
	}

	.numberInput>>>.el-input input {
		min-width: 250px;
		text-align: center;
	}
</style>
<script>
	export default {
		name: "numberInput",
		props: {
			require: null,
			value: null,
			errClass: {
				type: Array,
				default () {
					return ["err-b-c"];
				},
			},
		},

		data() {
			return {
				Style: null,
				isNumber: "",
				ifshow: false,
				message: "",
				currentValue: this.value,
			};
		},
		methods: {
			blurInput: function() {
				var that = this;
				that.isNumber = /[^\d.]/g.test(this.currentValue);
				if (that.require) {
					if (!that.currentValue || that.isNumber) {
						//   $('.el-input').addClass("error");
						that.currentValue = "";
						that.ifshow = true;
						that.message = "请输入正数且不能为空";
					} else {
						that.ifshow = false;
					}
					if (that.currentValue == 0) {
						that.currentValue = "";
						that.ifshow = true;
						that.message = "不能为0";
					} else {
						that.ifshow = false;
					}
				} else {
					if (that.isNumber) {
						that.currentValue = "";
						that.ifshow = true;
						that.message = "请输入正数";
					} else {
						that.ifshow = false;
					}
				}
				// that.$emit("inputV",that.data);
			},
			inputF: function() {
				var that = this;
				const value = event.target.value;
				that.isNumber = /[^\d.]/g.test(value);
				console.log(event.target.value);
				if (that.require) {
					if (!that.isNumber && value) {
						that.ifshow = false;
					} else {
						that.ifshow = true;
						that.message = "请输入正数且不能为空";
					}
				} else {
					if (!that.isNumber) {
						that.ifshow = false;
					} else {
						that.ifshow = true;
						that.message = "请输入正数";
					}
				}
				this.currentValue = value;
				this.$emit("input", value);
			},
		},
	};
</script>